<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.content{
				margin: 100px auto;
				width: 550px;
				height: 450px;
				border: 1px solid black;
			}
			.img-show{
				width: 450px;
				height: 350px;
				margin: 10px auto;
			}
			.img-show>img{
				border: 1px solid red;
				width: 450px;
				height: 350px;
			}
			.controls>img{
				float: left;
				width: 50px;
				height: 40px;
				margin: 10px 15px;
				border:  1px solid black;
			}
			.clear{
				clear: both;
			}
			.controls{
				margin: 10px auto;
			}
			.controls>a{
				margin: 10px 15px;
				display: inline-block;
				width: 30px;
				height: 40px;
				line-height: 40px;
				float: left;
				border: 1px solid red;
				text-decoration: none;
			}
		</style>
		<script type="text/javascript">
			
		</script>
	</head>
	<body>
		<div class="content">
			<div class="img-show"><img src="img/2.jpg"/></div>
			<div class="controls">
				<a ><</a>
				<img src="img/1.jpg" />
				<img src="img/2.jpg" class="selected"/>
				<img src="img/3.jpg"/>
				<img src="img/4.jpg"/>
				<img src="img/5.jpg"/>
				<a >></a>
				<div class="clear"></div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		window.onload = function() {
			var contro = document.getElementsByClassName('controls');
			var imgs = contro[0].getElementsByTagName('img');
			console.info(imgs);
			for(var i = 0 ; i<imgs.length ; i++) {
				console.info(imgs[i].className);
				if(imgs[i].className == 'selected'){
						imgs[i].style.border = '3px dashed blue';
						break;
				}
			}
			var as= document.getElementsByTagName('a');
			as[0].onclick = function() {
				var img_show = document.getElementsByClassName('img-show');
				var img_bigs = img_show[0].getElementsByTagName('img'); 
				var contro = document.getElementsByClassName('controls');
				var imgs = contro[0].getElementsByTagName('img');
				var index = -1;
				for(var i = 0 ; i<imgs.length ; i++) {
					console.info(imgs[i].className);
					if(imgs[i].className == 'selected'){
							index = i;
							console.info('index = '+ index)
							break;
					}
				}
				if(index==-1){
						console.info('查无被选中');
				} else {
					index = index - 1;
					if(index >= 0 ){
						imgs[index].style.border = '3px dashed blue';
						imgs[index].className = 'selected';
						img_bigs[0].src = imgs[index].src;
						imgs[index+1].style.border = '1px solid black';
						imgs[index+1].className = '';
					} else {
						console.info('已达第一张');
						alert('已达第一张');
					}
				}
			}
			
			as[1].onclick = function() {
				var img_show = document.getElementsByClassName('img-show');
				var img_bigs = img_show[0].getElementsByTagName('img'); 
				var contro = document.getElementsByClassName('controls');
				var imgs = contro[0].getElementsByTagName('img');
				var index = -1;
				for(var i = 0 ; i<imgs.length ; i++) {
					console.info(imgs[i].className);
					if(imgs[i].className == 'selected'){
							index = i;
							console.info('index = '+ index)
							break;
					}
				}
				if(index==-1){
						console.info('查无被选中');
				} else {
					index = index + 1;
					if(index <= 4 ){
						imgs[index].style.border = '3px dashed blue';
						imgs[index].className = 'selected';
						img_bigs[0].src = imgs[index].src;
						imgs[index-1].style.border = '1px solid black';
						imgs[index-1].className = '';
					} else {
						console.info('已达最后一张');
						alert('已达最后一张');
					}
				}
			}
			
		}
	</script>
</html>
